<template>
  <div class="right-main borderStyle bigTableStyle">
    <!-- 表单 -->
    <div class="right-main-form">
      <el-form ref="form" :inline="true" :model="form" label-width="1.2rem">
        <el-row>
          <el-col :span="7">
            <el-form-item label="文件类型：">
              <el-select
                v-model="form.type"
                style="width:100%;"
                size="small"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="查找时间：">
              <el-date-picker
                v-model="form.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="startbox">
              <div class="btn centerbox">
                <i class="el-icon-search"></i>
              </div>
              <div class="btn centerbox">
                <i class="el-icon-upload"></i>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="right-main-table">
      <el-table
        border
        :data="tableData"
        style="width: 100%;"
        height="100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="substation" label="名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="area" label="开始时间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="subordinateToSubsystem" label="结束时间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="monitoringPoints" label="大小/B" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="monitoringPoints" label="下载进度" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="right-main-page centerbox elPaginationStyle" style="margin-top: .2rem;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";

interface optionList {
  value: string;
  label: string;
}
interface tableDataType {
  substation: string;
  area: string;
  subordinateToSubsystem: string;
  monitoringPoints: string;
  alarmValueLimit: string | number;
  lowerLimitAlarmValue: string | number;
  maximumAttention: string | number;
  payAttentionToValueTheLowerLimit: string | number;
  popup: string;
  whetherToPush: string;
}
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component
export default class extends Vue {
  // 弹窗状态
  editStatus: boolean = false;
  editStatus2: boolean = false;
  // 表单
  public form: object = {
    type: "",
    date: "",
  };
  type_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "1",
      label: "类型一",
    },
    {
      value: "2",
      label: "类型二",
    },
  ];
  // 表格数据
  tableData: Array<tableDataType> = [
    // {
    //   substation: "110kV商西变电站",
    //   area: "10kV开关室",
    //   subordinateToSubsystem: "环境监测",
    //   monitoringPoints: "温度",
    //   alarmValueLimit: 5,
    //   lowerLimitAlarmValue: 30,
    //   maximumAttention: 10,
    //   payAttentionToValueTheLowerLimit: 20,
    //   popup: "是",
    //   whetherToPush: "",
    // },
  ];
  tableSelect: Array<object> = [];
  //   分页
  pages: pagesType = {
    pageSize: 10,
    page: 5,
    totalSize: 30,
  };

  // ------------------表单里的批量修改----------------

  // 表单里的查询
  onSearch() {}

  // -------------------表格选择事件--------------------
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   -------------------分页----------------------------
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
  }
}
</script>

<style lang="scss" scoped>
.right-main {
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  .btn {
    width: 0.6rem;
    height: 0.6rem;
    font-size: 0.26rem;
    color: #fff;
    margin-bottom: 0.22rem;
  }
  &-form {
    width: 100%;
    height: 0.6rem;
  }
  &-table {
    width: 100%;
    height: calc(100% - 1.2rem);
  }
  &-page {
    width: 100%;
    height: 0.6rem;
  }
}
</style>

